<template>
  <app-navbar/>
  <app-header/>
  <router-view></router-view>
  <app-footer></app-footer>
</template>

<script lang="ts"
        setup>
import {getBrand, getCategory, getSwiper} from '@/api/common'
import AppFooter from '@/components/AppFooter.vue'
import AppHeader from '@/components/AppHeader.vue'
import AppNavbar from '@/components/AppNavbar.vue'
import {useCategoryStore} from '@/stores/category'
import {useSwiperStore} from '@/stores/swiper'
import type {Brand, Category} from '@/types/category'
import type {Swiper} from '@/types/swiper'
import {storeToRefs} from 'pinia'

let cateStore = useCategoryStore()
let {list: cateList, brand} = storeToRefs(cateStore)

let swiperStore = useSwiperStore()
let {list: swiper} = storeToRefs(swiperStore)

requestAll()

// 发起所有接口请求
function requestAll(): void {
  Promise.all([
    getSwiper(),
    getCategory(),
    getBrand(10)
  ]).then(([swiperRes, CateRes, BrandRes]) => {
    initSwiper(swiperRes)
    initCategory(CateRes)
    initBrand(BrandRes)
  })
}

// 初始化轮播图数据
function initSwiper(res: any): void {
  swiper.value = <Swiper[]>res.result
}

// 初始化分类
function initCategory(res: any): void {
  cateList.value = <Category[]>res.result
}

// 初始化品牌
function initBrand(res: any): void {
  brand.value = <Brand[]>res.result
}
</script>

<style scoped>

</style>